<template>
	<view>
		<view class="topxian"></view>
		<!-- <u-navbar :title="title" @custom-back="fan"></u-navbar> -->
		<view class="line u-flex mdx" style="padding: 25rpx 0;">
			<view class="u-flex-1">筛选</view>

			<u-input v-model="tabText" input-align='right' type="select" :border="false" @click="tabShow = true" />
		</view>
		<view class="mdx">
			<view class="term-flex " v-for="(item1,index1) in dataList" :key="index1">
				<view class="dis" @tap="look(item1)" style="width: 100%;">
					<view>
						<u-image width="180rpx" height="180rpx" border-radius="15rpx" :src="item1.imgName"></u-image>
						<!-- <image class="term-flex-img" src="https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg">
						</image> -->
					</view>
					<view style="width: 70%;">
						<view class="term-flex-tit clamp" style="height: 80rpx;">
							{{item1.name}}
						</view>
						<view style="margin-top: 10rpx; height: 35rpx;" class="hui99">
							{{item1.labelName?'#':''}}{{item1.labelName||''}}
						</view>
						<view class="dis align-items" style=" margin-top: 15rpx;height: 45rpx;">
							<view class="hui99">当前学习进度：{{item1.progress}}</view>
							<!-- <view class="hui99" v-else>当前学习进度：未学习</view> -->
							<view class="term-right"
								style="color: #FFFFFF; background-color: #00a29a;border-radius: 5rpx;">查看详情</view>
						</view>
					</view>
				</view>

			</view>
			<u-toast ref="uToast" />
		</view>
		<view v-if="dataList.length<1" style="padding-top: 400rpx;" class="u-p-b-100">
			<u-empty icon-size="280" text="暂无数据~" src="/static/images/noneList.png"></u-empty>
		</view>
		<view class="u-padding-20" v-else>
			<u-loadmore :status="status" />
		</view>
		<u-select v-model="tabShow" :list="tabList" @confirm='tabSelect'></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				dataList: [],
				bid: '',

				tabList: [{
					label: '全部'
				}],
				tabText: '全部',
				tabId: 0,
				tabShow: false,

				status: 'loadmore',
				page: 1,
				pageSize: 10,
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.status = 'loading';
				setTimeout(() => {
					this.getList();
				}, 500);
			}
		},
		onLoad(option) {
			this.bid = option.id;
			uni.setNavigationBarTitle({
				title: option.name || '' + '课程列表'
			})
			this.initList();
		},

		methods: {
			initList() {
				//获取标签你北奥
				this.getTaabList();
				this.getList();
			},
			//获取课程列表
			getList() {
				if (this.tabText == '全部') {
					this.$http.get('app/CurriculumContrller/selectUnitCourse', {
						page: this.page,
						num: this.pageSize,
						unid: this.bid
					}).then(res => {
						if (res.code == 200) {
							res.data.forEach(e => {
								this.dataList.push(e)
							})
							if (res.data.length < this.pageSize) this.status = 'nomore';
							else this.status = 'loadmore';
						}
						uni.stopPullDownRefresh();
					})
				} else {
					this.$http.get('app/PostController/selectLabelDepartment', {
						lid: this.tabId,
						did: this.bid
					}).then(res => {
						if (res.code == 200) {
							res.data.forEach(e => {
								this.dataList.push(e)
							})
							// if (res.data.length < this.pageSize) this.status = 'nomore';
							// else this.status = 'loadmore';
							this.status = 'nomore';
						}
						uni.stopPullDownRefresh();
					})
				}
			},
			getTaabList() {
				this.$http.get('app/PostController/selectLabelAll', {
					did: this.bid
				}).then(res => {
					if (res.code == 200) {
						res.data.forEach(e => {
							e.label = e.labelname
							e.value = e.id
							this.tabList.push(e)

						})
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
						})
					}
				})
			},
			tabSelect(e) {
				this.tabText = e[0].label
				this.tabId = e[0].value
				this.page = 1
				this.dataList = []
				this.getList();
			},
			fan() {
				uni.navigateBack(1)
			},
			//查看详情
			look(i) {
				uni.navigateTo({
					url: '/pages/term/course/course?id=' + i.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.mdx {
		width: 92%;
		margin-left: 4%;
	}

	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}
</style>
